<template>
	<!-- 视频内容组件，有几行每行显示几个 -->
	<div class="video-box">
		<div class="videos" v-for="(list, index) in videoss" :key="index" :class="{unfull: list.length<config.num}">
			<div class="video-group" v-for="(item, index) in list" :key="item.id">
				<Video :video="item" @handler="$emit('handler', item, msg)"/>
				<Author :author="{name: item.name, author: item.author_name, bvid: item.bvid, authorId: item.author_id}"/>
			</div>
		</div>
	</div>
</template>

<script>
import Video from './Video.vue'
import Author from './Author.vue'

export default{
	props:{
		// 视频主题id
		msg:{
			type: Object
		},
		// 所有视频数据
		videos:{
			type: Array,
			required: true
		},
		// 视频排列配置
		config:{
			type: Object,
			default: () => ({
				rows: 1,
				num: 5,
				sum: 5
			})
		}
	},
	computed:{
		// 过滤后要显示的数据
		videoss(){
			if (!this.videos.length>0) return [];
			let arr = [],
					num = this.config.num,
					rows = this.config.rows
					
			for(let i=0; i<rows; i++){
				arr[i] = this.videos.slice(i*num, num*(i+1))
			}
			return arr
		}
	},
	components:{
		Video,
		Author
	}
}
</script>

<style scoped lang="less">
.videos{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 9.5px 0 12px 0;
	.video-group{
		width: 170px;
	}
}
.unfull{
	display: inline-block;
	.video-group{
		width: 170px;
		margin-right: 10px;
	}
}
</style>
